<script setup lang="ts">
import {getCurrentInstance, inject, ref,watch} from "vue";

const {proxy} = getCurrentInstance() as any; // 类似于this
let showToast = inject("ShowNToast",ref(false));
let ShowNToastTxt = inject("ShowNToastTxt",ref(''));
watch(showToast,(value)=>{
  console.log(value,'showToast')
  if(value){
    setTimeout(()=>{
      showToast.value = false
    },1500)
  }
})
</script>

<template>
  <div class="showToast" v-if="showToast==true" @click.stop>
    <div class="show">
      <div class="txt">{{ShowNToastTxt}}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.showToast{
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  display: flex;
  background-color: rgba(0,0,0,0.6);
  z-index: 999;
  justify-content:center;
  align-items: center;
  .show{
    width: 289px;
    min-height: 72px;
    position: relative;
    border-radius: 10px;
    background-image: url("@/assets/images/components/bgToast.png");
    background-repeat: no-repeat;
    background-size: 289px 72px;
    overflow: hidden;
    font-weight: 500;
    font-size: 14px;
    color: #FEFEFE;
    line-height: 19px;
    .txt{
      width: 220px;
      position: absolute;
      left: 20px ;
      top:11px;
      line-height: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>